<template>
  <div>
    <div :style="{display:'flex',flexDirection:'row',alignItems:'center',height:'50px',borderBottomWidth:'1px',borderBottomColor:'#ececec',borderBottomStyle:'solid'}">
      <div :style="{paddingLeft:'10px'}">用户名：</div>
      <input type="text" v-bind:value="user" placeholder="用户名/手机" v-on:input="userChange" >
    </div>

    <div :style="{display:'flex',flexDirection:'row',alignItems:'center',height:'50px',borderBottomWidth:'1px',borderBottomColor:'#ececec',borderBottomStyle:'solid'}">
      <div :style="{paddingLeft:'10px'}">密&nbsp;&nbsp;&nbsp;码：</div>
      <input type="password" v-bind:value="pwd"  placeholder="请输入密码" v-on:input="pwdChange" >
    </div>
    <div
      v-on:click="_loginAccount()"
      :style="{width:'100%',height:'50px',background:'#4dc1c1',color:'#fff',textAlign:'center',lineHeight:'50px',marginTop:'50px'}">
      登陆
    </div>
    <div :style="{display:'flex',flexDirection:'row',justifyContent:'space-around',height:'100px',alignItems:'center'}">
      <router-link to='/regist'   :style="{width:'30%',color:'red',textAlign:'center'}">注册账号</router-link >
      <router-link to='/PwdForget'   :style="{width:'30%',color:'red',textAlign:'center'}">忘记密码</router-link >
    </div>
    <!--<div>-->
      <!--<button @click="$store.commit('increment','我是改变以后的数值')">+</button>-->
      <!--<button @click="$store.commit('decrement')">-</button>-->
    <!--</div>-->

  </div>

</template>

<script>
  import { mapState,mapMutations } from 'vuex';
  import {loginAccount} from "../../netWork/UserApi";
  import { Toast } from 'mint-ui';
  export default {
        name: "login",
        components: {

        },
        data(){
          const user= JSON.parse(localStorage.mydata);
          return{
            user:user['username'],
            pwd:user['password'],
          }
        },
        mounted: function() {

        },

        methods:{
          userChange(e){
             let userName=e.target.value;
             this.user=e.target.value
           },
          pwdChange(e){
            let pwdName=e.target.value;
            this.pwd=e.target.value
          },
          _loginAccount(){
            if(!this.user){
              Toast({
                message: "用户名不能为空",
                position: 'center',
                duration: 1000
              });
              return
            }
            if(!this.pwd){
              Toast({
                message: "密码不能为空",
                position: 'center',
                duration: 1000
              });
              return
            }
            let fromData={
              username:this.user,
              password:this.pwd
            };
            loginAccount(fromData,(responseData)=>{
              const that=this;
              if(responseData['code']==='1'){
                console.log(responseData);
                localStorage.setItem('mydata',JSON.stringify(fromData));
                that.$store.commit('increment',responseData['data']['UserId']);
                that.$store.commit('getuserInformation',responseData['data']);
                window.history.back();
                Toast({
                  message: responseData['msg'],
                  position: 'center',
                  duration: 1000
                });
              }else {
                Toast({
                  message: responseData['msg'],
                  position: 'center',
                  duration: 1000
                });
              }
            })
          },

       }
    }

</script>

<style scoped>

</style>
